<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务一</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 920px;
        height: 572px;
        background-color: white;
        margin: 30px auto;
    }

    .left {
        width: 450px;
        height: 572px;
        background-color: white;
        margin: 30px auto;
        float: left;
    }

    .left1 {
        width: 450px;
        height: 400px;
        background-color: #f2f2f2;
        background-image: url(img/accessories_tile__cpxslrghwmfm_medium.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .left1 h5 {
        text-align: center;
        padding-top: 50px;

    }

    .left1 h2 {
        text-align: center;
        padding-left: 20px;
    }

    .left1 a {
        text-decoration: none;
        width: 50px;
        height: 25px;
        background-color: #0071e3;
        display: block;
        text-align: center;
        margin: 10px auto;
        line-height: 25px;
        color: white;
        font-size: 5px;
        border-radius: 20px;

    }

    .left2 {
        background-image: url(img/icon_financing_large.png);
        background-repeat: no-repeat;
        background-color: white;
        background-size: 25px;
        background-position: 217px 30px;
        width: 450px;
        height: 172px;
    }

    .left-p1 {
        height: 14px;
        font-weight: 600;
        font-size: 5px;
        text-align: center;
        padding-top: 65px;
    }

    .left-p2 {
        font-weight: 400;
        font-size: 10px;
        text-align: center;
    }

    .left2 a {
        text-decoration: none;
        width: 90px;
        height: 15px;

        display: block;
        text-align: center;
        margin: 10px auto;
        line-height: 15px;
        color: #247cd3;
        font-size: 5px;
        border-radius: 20px;
    }

    .right {
        width: 450px;
        height: 572px;
        background-color: wheat;
        margin: 30px auto;
        float: right;
    }

    .right1 {
        width: 450px;
        height: 400px;
        background-color: #f2f2f2;
        background-image: url(img/trade_in_mac_tile__e1ijz340jkeq_medium.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .right2 {
        background-image: url(img/icon-delivery__c1ylwt2ifvki_large.png);
        background-repeat: no-repeat;
        background-color: rgb(255, 255, 255);
        background-size: 25px;
        background-position: 217px 30px;
        width: 450px;
        height: 172px;
    }

    .right2-p1 {
        height: 14px;
        font-weight: 600;
        font-size: 5px;
        text-align: center;
        padding-top: 65px;
    }

    .right2-p2 {
        font-weight: 400;
        font-size: 10px;
        text-align: center;
    }

    .right a {
        text-decoration: none;
        width: 450px;
        height: 15px;

        display: block;
        text-align: center;
        margin: 10px auto;
        line-height: 15px;
        color: #247cd3;
        font-size: 5px;
        border-radius: 20px;
    }

    .right1-p1 {
        text-align: center;
        padding-top: 50px;
    }

    .right1-p2 {
        text-align: center;
        font-size: 5px;
        padding-top: 10px;
    }

    .right1 h2 {
        text-align: center;
        padding-left: 20px;
    }
</style>

<body>
    <div class="box">

        <!-- 左边的内容 -->
        <div class="left">
            <div class="left1">
                <!-- 上半部分 -->
                <h5>配件</h5>
                <h2>探索 Mac 精彩配件。</h2>
                <a href="#" target="-blank">选购</a>


            </div>
            <div class="left2">
                <!-- 下半部分 -->
                <p class="left-p1">分期付款</p>
                <p class="left-p2">符合条件的用户可选择<br>灵活的分期付款方式</p>
                <a href="##" target="-blank">进一步了解 ></a>
            </div>
        </div>
        <!-- 右边的内容 -->
        <div class="right">
            <!-- 上半部分 -->
            <div class="right1">
                <h5 class="right1-p1">Apple Trade In 换购计划</h5>
                <h2>换购新Mac,<br> 享受折抵优惠。</h2>
                <p class="right1-p2">你可用符合条件的电脑来获得折抵优惠，也可以选择免费回收处理。<br>
                    这样一来，你受益，地球也受益。</p>
                <a href="###" target="-blank">了解你设备的折抵金额 ></a>
            </div>
            <!-- 下半部分 -->
            <div class="right2">
                <p class="right2-p1">免费送货</p>
                <p class="right2-p2">享受免费送货上门服务</p>
                <a href="####" target="-blank">进一步了解 ></a>
            </div>
        </div>
</body>

</html>